/**
 * 猜你喜欢
 * 由 WangYu 创建
 * 日期 2017/9/14
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity, FlatList,ActivityIndicator,TouchableNativeFeedback
} from 'react-native';
import HomeComponentTitleView from "./HomeComponentTitleView";
import NetUtils from "../../util/NetUtils";
import Api from "../../config/Api";
export default class GuessYourLikeView extends Component {

    constructor(props) {
        super(props);
        this.state={
            data:[],
            loading:true,
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <HomeComponentTitleView leftIcon={'cnxh'}
                                        leftTitle={'猜你喜欢'}/>
                {this.state.loading?this.renderLoadingView():this.renderList()}
            </View>
        );
    }
    renderLoadingView(){
        return(
            <ActivityIndicator size={'large'} />
        );
    }

    renderList(){
        return(
            <FlatList
                data={this.state.data}
                keyExtractor={(item, index) => index}
                renderItem={({item, index}) => this.renderItemView(item, index)}/>
        );
    }

    componentDidMount() {
        //请求网络数据
        NetUtils.get(Api.guessYourLike, null, (result) => {
            //结果回调
            this.setState({
                loading:false,
                data:result.data,
            })
        })
    }

    renderItemView(data, index) {
        return (
            <TouchableNativeFeedback onPress={()=>alert('点击了')}>
            <View style={styles.itemStyle}>
                <Image source={{uri:this.dealWithImageUrl(data.imageUrl)}} style={{width:120,height:100,alignSelf:'center',marginLeft:10}}/>
                <View style={{flex:1,justifyContent:'space-around',padding:10}}>
                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                        <Text style={{color:'black'}}>{data.title}</Text>
                        <Text style={{color:'black'}}>{data.topRightInfo}</Text>
                    </View>
                    <Text style={{color:'#666666'}}>{data.subTitle}</Text>
                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                        <Text style={{color:'red'}}>{data.subMessage}</Text>
                        <Text style={{color:'black'}}>{data.bottomRightInfo}</Text>
                    </View>
                </View>
            </View>
            </TouchableNativeFeedback>
        );
    }

    dealWithImageUrl(url){
        return url.replace('w.h','160.140');
    }
}

const styles = StyleSheet.create({
    container: {},
    itemStyle:{
        height:120,
        backgroundColor:'white',
        flexDirection:'row',
        borderBottomWidth:1,
        borderBottomColor:'#e8e8e8',
    }
});
